<template>
  <div id="classifyPage">
    <el-row style="text-align: left;padding: 20px;">
      <el-button type="primary" @click="saveClassify(1)">添加分类</el-button>
      <el-dialog :title="title" :visible.sync="dialogVisible" size="tiny">
        <el-form :label-position="labelPosition" label-width="80px" :model="form">
          <el-form-item label="分类名">
            <el-input v-model="form.SHName"></el-input>
          </el-form-item>
          <el-form-item label="商户名">
            <el-input v-model="form.categoryName"></el-input>
          </el-form-item>
          <el-form-item label="密匙">
            <el-input v-model="form.sercurityKey"></el-input>
          </el-form-item>
          <el-row style="text-align: center">
            <el-button type="primary" @click="classifyAjax">确定</el-button>
          </el-row>

        </el-form>

      </el-dialog>
    </el-row>
    <el-row>
      <el-table :data="tableData" style="width: 100%" v-loading="loading">
        <el-table-column prop="id" label="ID" width="80">
        </el-table-column>
        <el-table-column prop="sHName" label="分类名">
        </el-table-column>
        <el-table-column prop="categoryName" label="商户名">
        </el-table-column>
        <el-table-column prop="sercurityKey" label="密钥">
        </el-table-column>
        <el-table-column label="修改">
          <template slot-scope="scope">
            <el-button type="text" size='mini' @click="saveClassify(2,scope.row)">修改</el-button>
          </template>
        </el-table-column>
        <el-table-column label="删除">
          <template slot-scope="scope">
            <el-button type="text" size='mini' @click="deleteClassify(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
        <el-table-column label="分类管理">
          <template slot-scope="scope">
            <el-button type="text" size='mini' @click="classifyLink(scope.row)">分类管理</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="block" style="text-align: right;padding-right: 40px;">

        <el-pagination :current-page.sync="pageNumber" @current-change='handleChange' :page="pageNumber"
                       :page-size="pageSize" layout="total, prev, pager, next" :total="total">
        </el-pagination>
      </div>

    </el-row>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        tableData: [],
        pageSize: 10,
        pageNumber: 1,
        total: 1,
        labelPosition: 'right',
        title: '添加分类',
        dialogVisible: false,
        loading: false,
        form: {
          categoryName: '',
          SHName: '',
          sercurityKey: ''
        }
      }
    },
    created () {
      this.getClassifyList()
    },
    methods: {
      classifyLink (row) {
        this.$router.push('/businessReport/shWeiXin')
        let query = {
          id: row.id,
          name: row.sHName
        }
        sessionStorage.setItem('classify info', JSON.stringify(query))
      },
      getClassifyList () {
        this.loading = true
        let params = {
          pageSize: this.pageSize,
          pageNumber: this.pageNumber
        }
        this.$api.getClassifyList(params).then(res => {
          if (res.code === '000000') {
            console.log(res.data)
            this.loading = false
            this.tableData = res.data.list
            this.total = res.data.totalRow
            this.$message({
              type: 'success',
              message: '获取分类列表成功'
            })
          }
        })
      },
      classifyAjax () {
        this.dialogVisible = false
        this.$api.saveClassify(this.form).then(res => {
          if (res.code === '000000') {
            console.log(res.data)
            this.$message({
              type: 'success',
              message: '操作成功'
            })
            this.getClassifyList()
          }
        })
      },
      saveClassify (mes, row) {
        if (mes === 1) {
          this.title = '添加分类'
          this.dialogVisible = true
          this.form.categoryName = ''
          this.form.SHName = ''
          this.form.sercurityKey = ''
          if (this.form.id) {
            delete this.form.id
          }
        }
        if (mes === 2) {
          this.title = '修改分类'
          this.dialogVisible = true
          this.form.id = row.id
          this.form.categoryName = row.categoryName
          this.form.SHName = row.sHName
          this.form.sercurityKey = row.sercurityKey
        }
      },
      deleteClassify (id) {
        this.$api.deleteClassify(id).then(res => {
          if (res.code === '000000') {
            console.log(res.data)
            this.$message({
              type: 'success',
              message: '操作成功'
            })
            this.getClassifyList()
          }
        })
      },
      handleChange (val) {
        this.pageNumber = val
        this.getClassifyList()
      }
    }
  }
</script>

<style lang="less">
  #classifyPage {
    th {
      text-align: center;
    }
  }
</style>
